<script setup lang="ts">
import { watch, ref } from 'vue'
import {getArticleAPI} from '../api/article'
import {ArticleList} from '../types/index'

// 1. 接收父页面传入的激活分类id
const props = defineProps<{
  activeId: number
}>()

// 2. 封装函数获取数据更新页面
const list = ref<ArticleList>([])
const getArticle = async () => {
  const res = await getArticleAPI(props.activeId)
  console.log(res);
  list.value = res.data.results
}

// 建议回顾vue3 watch用法
// 3. 监听外部传入的 activeId 变化, 调用更新页面函数
watch(() => props.activeId, () => {
  console.log('activeId changed 发请求')
  getArticle()
}, {
  immediate: true
})
</script>

<template>
  <div class="article-list">
    <!-- 遍历数据进行渲染 -->
    <div class="article-item" v-for="item in list" :key="item.art_id">
      <p class="title">{{item.title}}</p>
      <img v-for="(pic, index) in item.cover.images" :key="index" class="img" :src="pic" alt="">
      <div class="info">
        <span>{{ item.aut_name }}</span>
        <span>{{item.comm_count}}评论</span>
        <span>{{item.pubdate}}</span>
      </div>
    </div>
  </div>
</template>